.bui-tab-bar-color(@color) {
  color: var(~'--bui-color-@{color}');
}

.bui-tab-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  color: var(--bui-tab-bar-color);
  font-family: var(--bui-font-family);

  &-primary {
    .bui-tab-bar-color(primary);
  }

  &-success {
    .bui-tab-bar-color(success);
  }

  &-info {
    .bui-tab-bar-color(info);
  }

  &-warning {
    .bui-tab-bar-color(warning);
  }

  &-danger {
    .bui-tab-bar-color(danger);
  }

  &-vip {
    .bui-tab-bar-color(vip);
  }

  .bui-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bui-badge-position .bui-badge-contained,
  .bui-badge-position .bui-badge-outlined {
    top: 0;
  }
}
